<template>
  <div>
    <el-card class="box-card">
      <!--<h1>一周菜单安排</h1>-->
      <h2>{{ formatDate(selectedDate) }} 的菜单安排</h2>
      <el-calendar 
        v-model="selectedDate" 
        :range="weekRange" 
        @dateClick="handleDateClick"
        class="custom-calendar">
      </el-calendar>
      <div v-if="selectedDate">      
        <el-tabs v-model="activeMeal">
          <el-tab-pane label="早餐" name="breakfast">
            <MealList :meal="mealPlans.breakfast" :selectedDate="selectedDate" :activeMeal="activeMeal" @update="loadMeals" />
          </el-tab-pane>
          <el-tab-pane label="午餐" name="lunch">
            <MealList :meal="mealPlans.lunch" :selectedDate="selectedDate" :activeMeal="activeMeal" @update="loadMeals" />
          </el-tab-pane>
          <el-tab-pane label="晚餐" name="dinner">
            <MealList :meal="mealPlans.dinner" :selectedDate="selectedDate" :activeMeal="activeMeal" @update="loadMeals" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 调试输出 
      <pre>{{ selectedDate }}</pre>
      <pre>{{ mealPlans }}</pre>
      -->
    </el-card>
  </div>
</template>

<script>
import { format, addDays, startOfWeek, addWeeks} from 'date-fns';
import apiClient from '../api';
import MealList from './MealList.vue';

export default {
  components: { MealList },
  data() {
    return {
      selectedDate: addDays(new Date(), 1), // 默认显示明天的菜单
      activeMeal: 'breakfast',
      mealPlans: {
        breakfast: [],
        lunch: [],
        dinner: []
      }
    };
  },
  computed: {
    weekRange() {
      const start = startOfWeek(new Date());
      const end = addWeeks(start, 1); // 设置为两周的范围
      return [start, end];
    }
  },
  methods: {
    handleDateClick(value) {
      this.selectedDate = new Date(value);
      this.loadMeals();
    },
    async loadMeals() {
      if (!this.selectedDate) return;
      //console.log(`Loading meals for ${this.formatDate(this.selectedDate)}`);
      const meals = ['breakfast', 'lunch', 'dinner'];
      try {
        for (const meal of meals) {
          //console.log(`Requesting meal plans for date: ${this.selectedDate}, meal: ${meal}`);
          const response = await apiClient.get('/meal-plans', {
            params: { date: this.formatDate(this.selectedDate), meal }
          });
          //console.log(`API response for ${meal}:`, response.data);
          this.mealPlans[meal] = response.data; // 直接赋值
          //console.log(`Loaded meal plans for ${this.formatDate(this.selectedDate)} ${meal}:`, this.mealPlans[meal]);
        }
      } catch (error) {
        console.error('Error loading meals:', error);
      }
    },
    formatDate(date) {
      return format(new Date(date), 'yyyy-MM-dd');
    }
  },
  watch: {
    selectedDate() {
      this.loadMeals();
    },
    activeMeal() {
      this.loadMeals();
    }
  },
  mounted() {
    this.loadMeals();
  }
};
</script>

<style scoped>
.box-card {
  max-width: 800px;
  margin: 10px auto;
  padding: 10px;
}
.el-calendar{
  --el-calendar-cell-width: auto;
}  
</style>